<template>
  <div class="system">
    <div class="system-sel">
      <div class="" >
        <a-tabs defaultActiveKey="2" @change="callback">
          <!-- 通道概况 -->
          <a-tab-pane tab="通道概况" key="1">
            <a-row  :gutter="24">
              <a-col class="gutter-row" :span="8" >
                <!-- 收银卡片组件 -->
                <cart-item 
                  :img="require('@/assets/imgs/ic_appmanage_alipay.png')"
                  :open="1"
                />
              </a-col>
              <a-col class="gutter-row" :span="8">
                <cart-item 
                  :img="require('@/assets/imgs/ic_appmanage_wechatpay.png')"
                  :open="0"
                />
              </a-col>
              <a-col class="gutter-row" :span="8">
                <cart-item 
                  :img="require('@/assets/imgs/ic_appmanage_unionpay.png')"
                  :open="2"
                />
              </a-col>
            </a-row>
          </a-tab-pane>
          <!-- 支付宝收银 -->
          <a-tab-pane tab="支付宝收银" key="2" forceRender>
            <set-item id="2"></set-item>
          </a-tab-pane>
          <a-tab-pane tab="微信收银" key="3">
            <set-item id="3"></set-item>
          </a-tab-pane>
          <a-tab-pane tab="银联收银" key="4">银联收银</a-tab-pane>
        </a-tabs>
      </div>
      <!-- 暂未开通该服务，请前往开通 -->
      <div class="no-open" v-if=" 0 == 1">
        <div class="no-open-img">
          <img src="../../../assets/imgs/ic_appmanage_unionpay.png" alt="">
        </div>
        <div class="title">暂未开通该服务，请前往开通</div>
        <div> <a-button type="primary">前往开通</a-button> </div>
      </div>
    </div>
    <!-- 收银方案设置 -->
    <div class="shared-basic" style="margin-top:10px;">
      <a-card 
      title="收银方案设置" 
      :bordered="false" 
      style="width: 100%"
      >
        <span slot="extra" style="cursor:pointer;color:#358CF0;position:absolute;top:18px;left:140px">
          修改<a-icon type="edit" />
        </span>
        <div class="info">
          ggg
        </div>
      </a-card>
    </div>
  </div>
</template>
<script>
import CartItem from './component/CartItem'
import SetItem from './component/SetItem'
export default {
  components: {
    CartItem,
    SetItem
  },
  data () {
    return {
    }
  },
  methods: {
    callback (key) {
      window.console.log(key)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  // padding: 5px 0;
}
.system {
  &-sel {
    padding: 0 20px 25px;
    background: #ffffff;
    color: #333333;
    border-radius: 5px;
  }
  .shared-basic {
    margin-top:10px;
    border-radius: 5px;
  }
  .no-open {
    text-align: center;
    &-img {
      border: 1px solid red;
      padding-top: 60px;
    }
    .title {
      margin: 16px 0 25px 0;
    }
  }
}
</style>